<template>
    <div class="box">
        <!-- 聊天容器 -->
        <header>
            <van-nav-bar title="咨询" left-arrow @click-left="onClickLeft" />
        </header>
        <van-notice-bar text="快乐是一种心态，不是一种状态。无论发生什么，我们都会陪伴在您身边，相信您可以早日康复，恢复健康生活。" />

        <main>

            <div class="center">
                <!-- 显示在线人数 -->
                <p style="color: #ccc;">
                    实时在线人数：{{ onlineList.length }}
                </p>

                <div class="loaction">
                    <div class="message-item" v-for="(item, index) in messageList" :key="index">
                        <!-- 如果消息不是当前用户的，则显示在左边 -->
                        <div class="flex-left" v-if="item.userId !== userInfo.userId">
                            <div class="avatar">
                                {{ item.userId }}
                            </div>
                            <div style="margin-left: 10px" class="message-content">
                                <div v-if="item.content.startsWith('data:image')">
                                    <img :src="item.content" class="uploaded-image" />
                                </div>
                                <div v-else>
                                    {{ item.content }}
                                </div>
                            </div>
                        </div>
                        <!-- 如果是当前用户的消息，则显示在右边 -->
                        <div v-else class="flex-right">
                            <div class="message-content" style="margin-right: 10px">
                                <div v-if="item.content.startsWith('data:image')">
                                    <img :src="item.content" class="uploaded-image" />
                                </div>
                                <div v-else>
                                    {{ item.content }}
                                </div>
                            </div>
                            <div class="avatar">
                                {{ item.userId }}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 输入框和发送按钮 -->
                <div class="send-box">
                    <!-- 点击照片图标选择文件 -->
                    <van-icon name="photo" class="photo-icon" @click="triggerFileInput" />
                    <!-- 隐藏的文件输入框 -->
                    <input type="file" ref="fileInput" @change="handleImageUpload" style="display: none" />

                    <!-- 输入框，绑定v-model为yourMessage，当按下Enter键触发sendMessage方法 -->
                    <input class="message-input" type="text" v-model="yourMessage" @keyup.enter="sendMessage"
                        placeholder="请输入消息..." />

                    <button class="send-btn" @click="sendMessage">发送</button>
                    <van-icon name="add" class="add-icon" />
                </div>
            </div>
        </main>
        <footer>
            <van-icon name="todo-list" />
            <van-icon name="cluster" />
            <van-icon name="volume" />
        </footer>
    </div>
</template>


<script setup>
import { ref, onMounted } from "vue";
import './chat.scss'

// 存储用户信息，初始化为一个空对象
const userInfo = ref({
    userId: "",
});

// 存储当前输入的消息
const yourMessage = ref("");

// 存储所有消息的列表
const messageList = ref([]);

// 存储在线用户列表
const onlineList = ref([]);

// WebSocket实例
let ws = null;

// 获取文件输入框的引用
const fileInput = ref(null);

// 触发文件输入框的点击事件
const triggerFileInput = () => {
    fileInput.value.click();
};

// 处理图片上传
const handleImageUpload = async (event) => {
    const file = event.target.files[0]; // 获取上传的文件
    if (file && file.type.startsWith("image")) {
        const reader = new FileReader();
        reader.onloadend = () => {
            // 读取完毕后，将图片的Base64数据添加到消息
            const imageBase64 = reader.result;
            sendImageMessage(imageBase64);
        };
        reader.readAsDataURL(file); // 将图片转换为Base64
    } else {
        alert("请选择一个图片文件");
    }
};

// 发送图片消息
const sendImageMessage = (imageBase64) => {
    // 发送图片数据到 WebSocket 服务器
    ws.send(
        JSON.stringify({
            type: "message", // 消息类型
            userId: userInfo.value.userId, // 发送者ID
            content: imageBase64, // 发送的图片Base64编码
        })
    );
};

// 发送文本消息
const sendMessage = () => {
    if (yourMessage.value) {
        ws.send(
            JSON.stringify({
                type: "message", // 消息类型
                userId: userInfo.value.userId, // 发送者ID
                content: yourMessage.value, // 消息内容
            })
        );
        yourMessage.value = ""; // 清空输入框
    }
};

// 初始化WebSocket连接的方法
const initWebsocket = () => {
    ws = new WebSocket("ws://localhost:8888/");
    console.log(ws);

    ws.onopen = () => {
        console.log("websocket连接成功");
        ws.send(
            JSON.stringify({
                type: "init", // 初始化类型
                userId: userInfo.value.userId, // 用户ID
                content: "欢迎来到聊天室",
            })
        );
    };

    ws.onerror = () => {
        console.log("websocket连接失败");
    };

    ws.onmessage = (data) => {
        const message = JSON.parse(data.data);
        switch (message.type) {
            case "tips":
                console.log(message.content);
                break;
            case "message":
                messageList.value.push(message);
                break;
            case "onlineList":
                onlineList.value = message.list;
                break;
            default:
                break;
        }
    };

    ws.onclose = () => {
        console.log("websocket连接关闭");
    };
};

onMounted(() => {
    userInfo.value.userId = new Date().getTime().toString().slice(8);
    initWebsocket();
});
</script>
